<!--
  ~ Copyright 2022 Scheer PAS Schweiz AG
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  imitations under the License.
  -->

<mat-card id="policy-card-{{ policy.definition.id }}" *ngIf="policy">
  <mat-card-header>
    <mat-icon id="policy-card-icon" color="primary" mat-card-avatar>{{
      policy.icon
    }}</mat-icon>
    <mat-card-title id="policy-card-title">{{
      policy.shortName
    }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <ng-container *ngIf="!policy.probeRequestFinished; else probe">
      <div id="spinner">
        <mat-spinner strokeWidth="3" diameter="40"></mat-spinner>
      </div>
    </ng-container>

    <ng-template #probe>
      <ng-container *ngIf="policy.probe; else probeError">
        <div id="short-summary">
          <div>
            <app-rate-quota-policy-short-limit
              [policy]="policy"></app-rate-quota-policy-short-limit>
            <p id="probe">
              <b>{{ policy.mainGaugeData?.currentVal }}</b> /
              {{ policy.restrictions?.limit }}
            </p>
          </div>
          <div id="info-button-box">
            <button
              (click)="setSectionToPolicies()"
              mat-icon-button
              color="primary"
              class="mt-10">
              <mat-icon>info</mat-icon>
            </button>
          </div>
        </div>
      </ng-container>
      <ng-template #probeError>
        <app-no-data
          [textClass]="'text-big1 dp-center'"
          [text]="'CLIENTS.NO_PROBES' | translate"></app-no-data>
      </ng-template>
    </ng-template>
  </mat-card-content>
</mat-card>
